<template>
  <div>
    <el-row  class="do-exam-title">
      <el-col :span="24">
        <span :key="item.itemOrder"  v-for="item in answer.answerItems">
             <el-tag :type="questionCompleted(item.completed)" class="do-exam-title-tag" @click="goAnchor('#question-'+item.itemOrder)">{{item.itemOrder}}</el-tag>
        </span>
      </el-col>
    </el-row>
    <el-row  class="do-exam-title-hidden">
      <el-col :span="24">
        <span :key="item.itemOrder"  v-for="item in answer.answerItems">
             <el-tag  class="do-exam-title-tag" >{{item.itemOrder}}</el-tag>
        </span>
        <span class="do-exam-time">
          <label>剩余时间：</label>
        </span>
      </el-col>
    </el-row>
    <el-container  class="app-item-contain">
      <el-header class="align-center">
        <h1>{{form.name}}</h1>
        <div>
          <span class="question-title-padding">试卷总分：{{form.score}}</span>
          <span class="question-title-padding">考试时间：{{form.suggestTime}}分钟</span>
        </div>
      </el-header>
      <el-main>
        <el-form :model="form" ref="form"  label-width="100px">
          <el-row :key="index"  v-for="(titleItem,index) in form.titleItems">
            <h3>{{titleItem.name}}</h3>
            <el-card class="exampaper-item-box" v-if="titleItem.questionItems.length!==0">
              <el-form-item :key="questionItem.itemOrder" :label="questionItem.itemOrder+'.'"
                            v-for="questionItem in titleItem.questionItems"
                            class="exam-question-item" label-width="50px" :id="'question-'+ questionItem.itemOrder">
                <QuestionEdit :qType="questionItem.questionType" :question="questionItem"
                              :answer="answer.answerItems[questionItem.itemOrder-1]"/>
              </el-form-item>
            </el-card>
          </el-row>
           <el-row class="do-align-center">
             <el-button type="primary">提交</el-button>
             <el-button>取消</el-button>
           </el-row>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import QuestionEdit from './components/QuestionEdit'
export default {
    components: { QuestionEdit },
    data(){
        return {
            form: {},
            formLoading: false,
            answer: {
                questionId: null,
                doTime: 0,
                answerItems: []
            },
            timer: null,
            remainTime: 0
        }
    },
    created(){
        let id = this.$route.query.id;
        if( id && parseInt(id) !== 0){
            this.getRequest("/api/teacher/exam/paper/select/"+id).then(resp=>{
                if(resp && resp.code == 200){
                    this.form = resp.obj;
                    this.initAnswer();
                }
            })
        }

    },
    mounted(){},
    methods:{
        //初始化答案
        initAnswer(){
            this.answer.id = this.form.id
            let titleItemArray = this.form.titleItems
            for (let tIndex in titleItemArray) {
                let questionArray = titleItemArray[tIndex].questionItems
                for (let qIndex in questionArray) {
                    let question = questionArray[qIndex]
                    this.answer.answerItems.push({ questionId: question.id, content: null, contentArray: [], completed: false, itemOrder: question.itemOrder })
                }
            }
        },
        questionCompleted (completed) {
            return null;
        },
        goAnchor (selector) {
        this.$el.querySelector(selector).scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
        },
    }
}
</script>

<style>

</style>